<template>
    <div class="main-container">
        <navbar title="图片分享列表"></navbar>
        <div class="photoContainer">
            <div class="mui-slider photoHeader">
                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <div class="mui-scroll">
                        <a :class="['mui-control-item',i==0?'mui-active':'']" v-for="(item,i) in category" :key="i" @click="handleCategory(item.id)">
                            {{item.name}}
                        </a>
                    </div>
                </div>
            </div>
            <div class="photo-group">

                <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
                    <ul>
                        <router-link v-for="item in imglist" :key="item.id" :to="'/photos/'+item.id" tag="li">
                            <img v-lazy="item.imgsrc">
                            <div class="info">
                                <h3>{{item.name}}</h3>
                                <div class="img-info">{{item.info}}</div>
                            </div>
                        </router-link>
                    </ul>
                    <div class="txtip" v-show="allLoaded">
                        <span>已经到底了</span>
                    </div>
                </mt-loadmore>
            </div>
        </div>
    </div>
</template>

<script>
    // 导入 MUI ，使用懒图
    import mui from '../../lib/mui/js/mui.min.js'
    import NavBar from '../common/navbar.vue'
    import {
        Indicator,
        Toast
    } from 'mint-ui';

    export default {
        data() {
            return {
                //加载次数，用于模拟加到最后一页后禁止上拉动作
                loadBottomCount: 0,
                // 分类
                category: [{
                        id: '1',
                        name: '推荐'
                    },
                    {
                        id: '2',
                        name: '热点'
                    },
                    {
                        id: '3',
                        name: '北京'
                    },
                    {
                        id: '4',
                        name: '社会'
                    },
                    {
                        id: '5',
                        name: '娱乐'
                    },
                    {
                        id: '6',
                        name: '军事'
                    },
                    {
                        id: '7',
                        name: '健康'
                    }
                ],
                //图片列表
                imglist: [{
                        id: '1',
                        name: '1',
                        info: '111111111111111111',
                        imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533481729&di=9278bb3c0306554906491ef83ac6000d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.xiudodo.com%2Ffigure%2F00%2F00%2F33%2F16%2F73%2F1655bda6abbcd26.jpg'
                    },
                    {
                        id: '2',
                        name: '2',
                        info: '222222222222222222222',
                        imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533481754&di=16cd439c5aea4baf2733d64543e22772&imgtype=jpg&er=1&src=http%3A%2F%2Fold.bz55.com%2Fuploads%2Fallimg%2F121128%2F1-12112Q00036.jpg'
                    },
                    {
                        id: '3',
                        name: '3',
                        info: '33333333333333333333',
                        imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532887048371&di=60078f2e9908544dcb5aab4ac0ccb485&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fblog%2F201404%2F06%2F20140406232455_m5XVy.jpeg'
                    },
                    {
                        id: '4',
                        name: '4',
                        info: '4444444444444444',
                        imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532887059548&di=c382acfd26914537f4c3a261eac55c9a&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F58fb005766f6b.jpg'
                    },
                    {
                        id: '5',
                        name: '5',
                        info: '5555555555555555555',
                        imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532887069382&di=e86660e14b1ab348311321ce9499f820&imgtype=0&src=http%3A%2F%2Fwww.zcool.com.cn%2Fcommunity%2F037dd30582481f7a84a0d304f0db5d6.jpg'
                    },
                    {
                        id: '6',
                        name: '6',
                        info: '66666666666666666666',
                        imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532887081233&di=2dc005d8933c4b42c0fbac102658fb22&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F17%2F63%2F59%2F71W58PIC5hX_1024.jpg'
                    }

                ],
                imgMorelist: [{
                    id: '8',
                    name: '123dsafsdfdsvcxvcx',
                    info: '123dsafsdfdsvcxvcx',
                    imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533481729&di=9278bb3c0306554906491ef83ac6000d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.xiudodo.com%2Ffigure%2F00%2F00%2F33%2F16%2F73%2F1655bda6abbcd26.jpg'
                }]
            }
        },
        mounted() {
            // 初始化头部滑动
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
        },
        methods: {
            handleCategory() {

                Indicator.open('加载中...');

                setTimeout(x => {

                    this.imglist = this.imglist.reverse()

                    Indicator.close();
                }, 1500)

            },

            //下拉刷新
            loadTop() {

                this.imglist = this.imgMorelist.concat(this.imglist)

                // 加载更多数据
                this.$refs.loadmore.onTopLoaded();

                Toast({
                    message: '加载完毕',
                    duration: 1000
                });
            },
            //上拉加载更多
            loadBottom() {

                this.imglist = this.imglist.concat(this.imgMorelist)

                // 加载更多数据              
                this.$refs.loadmore.onBottomLoaded();
                this.loadBottomCount++;
                Toast({
                    message: '加载完毕',
                    duration: 1000
                });

                //模拟加载到最后一页，禁止
                if (this.loadBottomCount == 2) {
                    this.allLoaded = true; // 若数据已全部获取完毕
                    Toast({
                        message: '没有更多了',
                        duration: 1000
                    });
                }
            }
        },
        components: {
            navbar: NavBar
        }
    }
</script>

<style lang="scss" scoped>
    * {
        touch-action: pan-y
    }

    .photoContainer {
        .photoHeader {
            background-color: #fff;
            position: fixed;
            top: 44px;
            left: 0;
        }

        ul,
        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .photo-group {

            padding: 15px;
            margin-top: 30px;

            li {
                background-color: #999;
                text-align: center;
                margin-bottom: 15px;
                border-radius: 4px;
                box-shadow: 0 0 10px #333;
                position: relative;
                height: 240px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    vertical-align: middle;
                }

                img[lazy=loading] {
                    width: 40px;
                    height: 300px;
                    margin: auto;
                }

                .info {
                    color: #fff;
                    text-align: left;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    padding: 10px;
                    background-color: rgba(0, 0, 0, .3);
                    h3 {
                        font-weight: normal
                    }
                    .img-info {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-height: 43px;
                    }
                }

            }
        }

        .txtip {
            text-align: center;
            height: 30px;
            line-height: 0;
            margin-top: 45px;

            span {
                background: #fff;
                color: #999;
                padding: 0 15px;
            }
        }
        .txtip:after {
            content: '';
            width: 100%;
            height: 1px;
            display: block;
            background: #ccc;
        }
    }
</style>